<template>
    <div>
      <div class="orderslist">
        <div class="title">
          <div class="country">{{data.country + '签证'}}</div>
          <div class="gray consulate" v-show="false">{{data.consulate ? data.consulate : '未知' + '领区'}}</div>
          <div class="gray">{{'账号 ' + data.account}}</div>
          <div class="border_bottom"></div>
          <img src="../assets/cross.svg" alt="" class="cross" @click="showModal" v-show="canClose">
        </div>
        
        <div class="list">
          <div class="item" v-for="item in data.list">
            <div class="status" :class="{ yes: item.status == '1' || !item.status, no: item.status == '2' }">
            </div>
            <div class="descri" v-show="item.status">{{item.status == '1' || !item.status ? '需面试' : '免面试'}}</div>
            <div class="name">{{item.name}}</div>
            <div class="details">
              <div class="time">{{item.time}}</div>
              <div class="action">{{item.action}}</div>
            </div>
          </div>            
        </div>        
      </div>
      <Modal :modalShow="show" v-on:modalHide="hideModal" v-on:continue="unbind"></Modal>
    </div>
</template>

<script>
  import request from 'superagent'
  import Modal from './modal.vue'
  import c from '../configs'

  // import data from '../mockdata'
  export default {
    name: 'List',
    // props: ['country', 'consulate', 'account'],
    components: { Modal },
    props: [ 'data', 'account', 'canClose' ],    
    data: function () {
      return {        
        msg: '',
        show: false
      }
    },    
    methods: {
      showModal: function () {                
        this.show = true        
      },
      hideModal: function () {
        this.show = false
      },
      unbind: function () {
        var self = this        

        request
          .post(c.ctx + '/wechat/user/unbind/' + self.data.orderId)
          .end(function(err, res) {
            if (err || !res.ok) {
              alert('server broke')
            } else {
              if (res.body.code == 100) {
                // 解绑成功
                self.$emit('unbindOrder', self.data.orderId)
              } else {
                // 解绑失败
              }   
              self.show = false                          
            }
          })        
      }
    }
  }
</script>
<style lang="less">
  @gray: #808080;
  @light_gray: #eee;
  @start: #b7befc;
  @end: #7bdaf7;
  @bind_start: #fda232;
  @bind_end: #ebdb12;
  @blue: #3f8cfe;
  @inter_view_free: #afd028;
  @inter_view_required: #6fcdff;

  .orderslist {
    margin-top: 18px;
    .title {
      box-shadow: 0px 4px 3px #dadada;
      overflow: hidden;
      position: relative;
      top: 14px;
      margin: 0 auto;
      width: 85%;      
      background: white;
      padding: 18px 10px 8px;
      display: flex;
      justify-content: space-between;
      color: black;
      border-radius: 7px;
      .country, .consulate {
        white-space: nowrap;
      }
      .gray {
        color: @gray;       
      }
      .border_bottom {        
        width: 100%;
        height: 5px;
        position: absolute;
        bottom: 0;
        left: 0;
        background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@start), to(@end));
      }
      .cross {
        position: absolute;
        top: 6px;
        right: 6px;
        width:8px;
      }
    }
    .list {     
      background: white;
      padding: 18px 14px 8px;
      border-radius: 7px;
      margin-bottom: -5px;
      box-shadow: 0px 0px 2px #eee;

      .item {
        position: relative;
        padding: 8px 0;
        &:nth-child(n+2) {
          border-top: 1px solid @light_gray;
        }
        &:after {
          content: "";
          position: absolute;
          top: 50%;
          transform: translateY(-50%);          
          right: 0px;
          width: 10px;
          height: 10px;
          background-image: url(../assets/right-arrow.svg);
          background-size: 100% 100%;
        }
        display: flex;
        align-items: center;
        .status {
          width: 2px;
          height: 14px;         
        }
        .status.yes {
          background: @inter_view_required;
        }
        .status.no {
          background: @inter_view_free;
        }
        .descri {
          color: @gray;
          margin-left: 5px;
        }
        .name {
          margin-left: 22px;
          letter-spacing: 1px;
          width: 70px; 
        }
        .details {
          margin-left: 36px;
          font-size: 12px;
          .time {
            color: @gray;
            margin-bottom: 1px;
            text-align: center;
          }
          .action {
            padding: 0px 14px;
            text- align: center;
            color: @blue;
            border: 1px solid @blue;
            border-radius: 2px;
          }
        }
      }
    }   
  }
</style>